<template>
  <panel title="商品分类">
    <el-button slot="btn" type="primary" @click="dialogVisible = true">添加分类</el-button>
    <el-table :data="goodsTypeList">
      <el-table-column label="id" prop="id"></el-table-column>
      <el-table-column label="分类名称">
        <template slot-scope="scope">
          <span v-if="scope.row.isEdit == false">{{ scope.row.cateName }}</span>
          <el-input v-else v-model="scope.row.cateName"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="state">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.state" :active-value="1" :inactive-value="0" :disabled="!scope.row.isEdit"
            active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.isEdit == false" @click="scope.row.isEdit = true">编辑</el-button>
          <el-button v-else type="success" @click="complete(scope.row)">完成</el-button>
          <el-button type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="params.currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @current-change="pageChange"
      @size-change="sizeChange">
    </el-pagination>
    <el-dialog title="添加分类" :visible.sync="dialogVisible" width="50%">
      <el-form label-width="80px" :model="addTypes">
        <el-form-item label="商品类型">
          <el-input v-model="addTypes.cateName"></el-input>
        </el-form-item>
        <el-form-item label="上架">
          <el-switch v-model="addTypes.state" :active-value="1" :inactive-value="0" active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addType">确 定</el-button>
      </span>
    </el-dialog>
  </panel>
</template>

<script>
import { addGoodsTypeReq, goodsTypeReq1, goodsEditReq, goodsTypeReq } from '@/api/goods.api.js'
export default {
  data() {
    return {
      addTypes: {
        state: true,
        cateName: ''
      },
      // 页数
      params: {
        currentPage: 1,
        pageSize: 5
      },
      // 控制弹框是否弹出
      dialogVisible: false,
      // 得到商品的类型
      goodsTypeList: [],
      // 商品类型的总数
      total: null
    }
  },
  methods: {
    // 分页器
    // 分页设置
    pageChange(currentPage) {
      this.params.currentPage = currentPage
      this.cetaList()
    },

    // 一页的数据的数量
    sizeChange(pageSize) {
      this.params.pageSize = pageSize
      this.cetaList()

    },
    // 添加商品分类
    addType() {
      this.dialogVisible = false
      console.log(this.addTypes);
      addGoodsTypeReq(this.addTypes).then(res => {
        if (res.data.code === 0) {
          this.$message.success(res.data.msg)
          this.cetaList()
        }
      })
    },
    // 修改完成
    complete(row) {
      goodsEditReq(row).then(res => {
        if (res.data.code == 0) {
          this.$message.success(res.data.msg)
          row.isEdit = false
        }
      })
    },
    // 请求商品分类的函数
    async cetaList() {
      const res = await goodsTypeReq1(this.params)
      res.data.data.forEach(item => {
        // 在返回的结果中添加一个键值对 isEdit : false
        item.isEdit = false
      });
      // 将返回的数据赋值到goodsTypeList
      this.goodsTypeList = res.data.data
      this.total = res.data.total
    }
  },

  // 初始化得到数据
  created() {
    this.cetaList()
  }
};
</script>

<style lang="less" scoped>

</style>